<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>REPORT VIEW COMPONENT</title>
<!--meta http-equiv="X-UA-Compatible" content="IE=edge"-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="Stylesheet" type="text/css" href="../../theme/css/style_reset.css"/>
<link rel="Stylesheet" type="text/css" href="../../theme/css/comp_reportview.css"/>
<link rel="Stylesheet" type="text/css" href="../../theme/css/comp_kpi.css"/>
<script type="text/JavaScript" src="../../api/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../../api/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>
<script type='text/JavaScript' src='../../api/report_view.js'></script>

<!-- [REQUIRED] SCRIPT FOR INTEGRATION WITH BOI -->
<script type="text/javascript">
    /* IMPORTANT: REQUIRED FOR FLASH BASED REPORTS TO COMMUNICATE WITH BOI */

    /************************************************************/
    window.onload = function () {
        BOI.Events.addListener(BOI.Events.repvarchange, function (args) { //args[0] is the rep id
            var report = BOI.getContextReport(args[0]);
            if (report) {
                //ensure all reports having same variables are in refresh needed state
                for (var i in report.variables) {
                    for (var j in BOI.context.reports) {
                        if (BOI.context.reports[j].variables[i])
                        //
                            BOI.context.reports[j].state = BOILib.ReportStates.RefreshNeeded;
                    }
                }
                //properties.current_report = report;
                setReportStateExecuted(report.id);
                openReport(report);
                $('#dialog').hide();
            }
        });
        BOI.Events.addListener(BOI.Events.varchange, function (args) { //args[0] is the varname, args[1] is value/values
            var variable = BOI.context.variables[args[0]];
            variable.value = args[1];
            for (var i in  properties.executed_reports) {
                if (i != undefined) {
                    var rep = properties.executed_reports[i];
                    if (rep.variables[args[0]]) //report uses this variable?
                    {
                        //reload the report
                        // BOI.openReport(rep.id, rep.type, undefined, true, rep.id);

                        // rep.variables[ args[0] ].value = args[1];

                        setReportStateExecuted(rep.id);
                        openReport(rep);
                    }
                }
            }
        });
        BOI.Events.addListener(BOI.Events.app_loaded, function (args) { //args[0] is the rep id
            var rep_name = args[0];
            if (typeof rep_name == 'string') {
                var extension = rep_name.split('.').pop();
                if (extension) {
                    $("#tabs-1").html('<iframe src="' + rep_name + '" name="HOME_PG"></iframe>');
                }
                else {
                    var report = BOI.getContextReport(args[0]);
                    if (report) {
                        setReportStateExecuted(report.id);
                        $("#tabs-1").html('<iframe name="' + report.id + '"></iframe>');
                        openReport(report);
                    }
                }
            }
        });
        BOI.Events.addListener(BOI.Events.repopen, function (args) { //args[0] is the rep id
            var report = BOI.getContextReport(args[0]);
            if (report) {
                setReportStateExecuted(report.id);


                var li = $('#tabs ul li[rep_id="' + report.id + '"]');
                if (li.get(0)) {
                    tabs.tabs('option', 'active', li.index());
                }
                else
                    replaceTab(report.id, report.tech_name, report.label, report.type);
            }
        });
        BOI.Events.addListener(BOI.Events.favopen, function (args) { //args[0] is the rep id
            var report = BOI.getContextReport(args[0]);
            if (report) {
                setReportStateExecuted(report.id);
                var li = $('#tabs ul li[rep_id="' + report.id + '"]');
                if (li.get(0)) {
                    tabs.tabs('option', 'active', li.index());
                }
                else
                    replaceTab(report.id, report.tech_name, report.label, report.type, true);
            }
        });
        BOI.Events.addListener(BOI.Events.groupopen, function (args) { //args[0] is the group id
            var report_group = BOI.getContextReport(args[0]);
            if (report_group) {
                setReportStateExecuted(report_group.id);
                var li = $('#tabs ul li[rep_id="' + report_group.id + '"]');
                if (li.get(0)) {
                    tabs.tabs('option', 'active', li.index());
                }
                else
                    replaceTab(report_group.id, report_group.tech_name, report_group.label, report_group.type);
            }
        });
        BOI.Events.addListener(BOI.Events.maximize, function (args) {
            var location = args[0];
            $('#' + activeTab).find('[LOC="' + location + '"] div.kpi-cover').attr('class', 'maximize');
            $('#' + activeTab).find('[LOC="' + location + '"] span.toolbar').attr('class', 'maximize-toolbar');
        });
        BOI.Events.addListener(BOI.Events.minimize, function (args) {
            var location = args[0];
            $('#' + activeTab).find('[LOC="' + location + '"] div.maximize').attr('class', 'kpi-cover');
            $('#' + activeTab).find('[LOC="' + location + '"] span.maximize-toolbar').attr('class', 'toolbar');
        });
    }
    function init() {
        tabs = $('#tabs').tabs(
                {
                    activate:function (event, ui) {
                        activeTab = "tabs-" + (ui.newTab.index() + 1);
                        if (ui.newTab.index() == 0) {
                            $('#bi_fav_add').hide();
                            $('#bi_var_scr').hide();
                            $('#dialog').hide("blind", 1000, function () {
                                $('.icon-varscreen').removeClass('icon-varscreen-active');
                            });
                            return;
                        }
                        else {
                            $('#bi_fav_add').show();
                            $('#bi_var_scr').show();
                        }
                        var report = BOI.getContextReport($('#tabs li:eq(' + ui.newTab.index() + ')').attr("rep_id"));
                        checkStatusAndExecute(report);
                    }
                });
        $("#tabs span.ui-icon-close").live("click", function () {

            if ($('#dialog').is(':visible') == true) {
                $('#dialog').toggle();
            }
            var report = BOI.getContextReport($(this).closest("li").attr('rep_id'));
            resetReport(report);
            var panelId = $(this).closest("li").remove().attr("aria-controls");
            $("#" + panelId).css("visibility", "hidden");
            $("#" + panelId).remove();
            limit_tabs();
            tabs.tabs("refresh");
            //tabCounter--;
        });
    }

    var tabs,
            tabTitle = "tabtitle",
            tabTemplate = "<li rep_id='{rep_id}'><a href='#{href}'><span>#{label}</span></a> <span class='ui-icon ui-icon-close'>x</span></li>",
            tabContentTemplate = '<iframe name="{rep_id}"></iframe>',
            tabContentTemplateDiv = '<div class="kpi_view" id="grp_{rep_id}"></div>',
            tabCounter = 1,
            activeTab = "tabs-1";

    function replaceTab(rep_id, tech_name, rep_name, rep_type, from_favorite){

        var id = "tabs-" + tabCounter,
                li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, rep_name).replace(/\{rep_id\}/g, rep_id)),
                tabContentHtml = tabContentTemplate.replace(/\{rep_id\}/g, rep_id);
        if (rep_type == parent.BOILib.ReportTypes.ReportGroup)
            tabContentHtml = tabContentTemplateDiv.replace(/\{rep_id\}/g, rep_id);
        $('#tab_title').html(li);
        tabs.find('.tab-content-inner').html("<div  id='" + id + "'>" + tabContentHtml + "</div>");
        tabs.tabs("refresh");
        if (from_favorite) {
            BOI.openFavorite(BOI.favorites[rep_id], rep_id);
            var report = BOI.getContextReport(rep_id);
            report.state = BOILib.ReportStates.Current;
        }

        tabs.tabs('option', 'active', -1);

        properties.current_report.rep_id = rep_id;
        properties.current_report.rep_type = rep_type;

        tabs.tabs("refresh");

        var report;

        if (properties.report)
            report = BOI.getContextReport(properties.rep_tech_name);
        else
            report = BOI.createReport(properties.rep_tech_name, properties.rep_type);

        checkStatusAndExecute(report);

    }


    function limit_tabs() {
        var ul_width = 0, max_width = 0, tot_width = 0, l_wid = 0, li_count = 0;
        ul_width = $('.tabs ul.tab-title').width();
        $('.tabs ul.tab-title li').each(function () {
            l_wid = $(this).width();
            tot_width = tot_width + l_wid;
            //  alert(tot_width);
            li_count++;
        });
        if (tot_width > ul_width) {
            max_width = ul_width / li_count;
            $('.tabs ul.tab-title li a').css('max-width', max_width - 60);
        }
    }
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.tab-title li').addClass('1ui-tabs-active');
    });
    $('.icon-varscreen').live('click', function () {
        // $('#dialog').slideToggle();
        if ($('.icon-varscreen').hasClass('icon-varscreen-active')) {
            //$('#dialog').show("blind", 1000, function () { $('.icon-varscreen').addClass('icon-varscreen-active'); });
        }
        else {
            //  $('#dialog').hide("blind", 1000, function () { $('.icon-varscreen').removeClass('icon-varscreen-active'); });
        }
    });
</script>
<!-- COMPONENT STYLING -->
<style type="text/css">
    .kpi_view, .kpi_view div {
        height: 100%;
    }

    .kpi_view {
        position: relative;
    }

    .kpi-cover {
        width: 100%;
        height: calc(100% -23px) !important;
    }

    .kpi_view table {
        padding-bottom: 60px;
    }

    .loading {
        background-image: url("img/ajax-loader.gif");
        background-repeat: no-repeat;
        background-position: center center;
    }

    .maximize-toolbar {
        position: absolute;
        top: 45px;
        left: 20px;
        top: 0px;
        left: 0px;
        padding: 5px 0px 0px 0;
        height: 18px;
        width: calc(100% -40px);
        width: 100%;
        z-index: 350;
        background-color: #d7eff6;
        box-shadow: rgba(255, 255, 255, 0.5) 15px 0px 75px inset;
        display: block;
    }

    div.maximize {
        background-color: #d7eff6;
        width: 100%;
        height: calc(100% -18px);
        z-index: 10;
        position: absolute;
        top: 18px;
        left: 0px;

    }

    .toolbar1 {
        display: block;
        width: 100%;
        height: 20px;
        opacity: 0.5;
        background-color: black;
        z-index: 200;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
    });
</script>
</head>
<body>
<div class="top-links">
    <ul>
        <li><a id="bi_var_scr" class="icon-varscreen" style="display: none;" href="#"></a></li>
        <li><a id="bi_fav_add" class="icon-favourites" style="display: none;" href="#"></a></li>
    </ul>
</div>
<div class="content">
    <div id="dialog" class="varscreen-container">
        <iframe src="../bi_apps_comp_variable_screen.html"></iframe>
    </div>
    <div id="tabs" class="tabs">
        <ul class="tab-title" id="tab_title">
            <li><a href="#tabs-1"><span id="rep_title">Home</span></a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-content-inner">
                <div id="tabs-1">

                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>